<template>
  <div class="container">
    <!-- 头部搜索部分 -->
    <div style="height: 56px; width: 100%">
      <van-row
        type="flex"
        justify="space-around"
        align="center"
        style="padding: 0px 16px"
      >
        <van-col style="width: 100%">
          <van-search
            v-model="searchvalue"
            placeholder="请输入姓名或手机号"
            shape="round"
            @input="onSearch"
          ></van-search>
        </van-col>
        <!-- <van-col>
          <div class="publish">
            <div @click="$router.push('/verify/user')">添加客户</div>
          </div>
        </van-col> -->
      </van-row>
    </div>
    <!-- 主体部分 -->
    <van-list v-model="loading" :finished="finished" @load="onLoad" class="ss">
      <van-row class="user_classification_box">
        <van-col
          v-for="item in userList"
          :key="item.id"
          @click="handlePushDetails(item.id)"
          class="box_big"
        >
          <img :src="item.avatar ? item.avatar : avatar_default" alt />
          <van-row class="user_box_right">
            <van-col>{{ item.name }}</van-col>
            <van-col>{{ String(item.addTime).slice(0, 10) }}</van-col>
          </van-row>
        </van-col>
      </van-row>
    </van-list>
    <div class="num_footer">共{{ total }}位{{ moudleName }}</div>
  </div>
</template>
<script>
import {
  Search,
  List,
  Row,
  Col,
  Image,
  Dialog,
  Toast,
  IndexBar,
  IndexAnchor,
} from 'vant';
import { customersList, customersListType } from '@/api/api';
import avatar_default from '@/assets/images/avatar_default.png';

export default {
  data() {
    return {
      avatar_default,
      loading: false,
      finished: false,
      searchvalue: '',
      limit: 10,
      page: 0,
      sort: '',
      order: '',
      userList: [],
      total: '',
      moudleName: '',
      getRecommend: '1',
    };
  },
  created() {
    this.getMoudleName();
  },
  mounted() {},
  // beforeRouteEnter
  methods: {
    onSearch() {
      this.page = 1;
      this.getUserList();
    },
    handlePushDetails(userId, item) {
      if (this.$route.params.id === '1') {
        this.$router.push({
          path: `/user/business/customer/detail/${userId}`,
          query: { getRecommend: 1 },
        });
      } else {
        this.$router.push(`/user/business/customer/detail/${userId}`);
      }
    },
    getMoudleName() {
      switch (this.$route.params.id) {
        case '0':
          this.moudleName = '新客户';
          document.title = '新客户';
          break;
        case '1':
          this.moudleName = '转介绍客户';
          document.title = '转介绍客户';
          break;
        case '2':
          this.moudleName = '未验证客户';
          document.title = '未验证客户';
          break;
      }
    },
    getUserList() {
      customersListType({
        searchType: this.$route.params.id,
        page: this.page,
        limit: this.limit,
        searchValue: this.searchvalue,
      })
        .then((res) => {
          this.userList.push(...res.data.data.list);

          this.total = res.data.data.total;
          this.pages = res.data.data.pages;
          this.loading = false;
          if (this.page >= this.pages) {
            this.finished = true;
          }
        })
        .catch((err) => {
          this.page--;
          this.loading = false;
          this.finished = true;
        });
    },
    onLoad() {
      this.page++;
      this.getUserList();
    },
  },
  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Image.Toast]: Toast,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>
<style lang="scss" scoped>
/deep/ .van-search {
  padding-left: 0;
}
.container {
  /* 因为是遮罩效果所以要fixed */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  /*必须 */
  display: flex;
  /* 必须，规定元素的排列方向 */
  flex-direction: column;
  /* 必须占满屏 */
  height: 100%;
  /* 没有这个就不能滚动了 */
  overflow: auto;
}
.ss {
  width: 100%;
  /* 占了百分百-flex:0的占位 */
  flex: 1;
  /* background: #143541; */
  font-size: 40px;
  text-align: left;
}
.publish {
  line-height: 30px;
  height: 30px;
  text-align: end;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 3px 0 10px;
  // letter-spacing: 5px;
  color: white;
  margin-left: 10px;
  white-space: nowrap;
}
.num_footer {
  /* 占位用 */
  flex: 0;
  margin: 14px auto;
  /* background: #555555; */
  margin-bottom: 15px;
  font-size: 16px;
  color: rgba(157, 155, 155, 1);
}
.view-router {
  padding-bottom: 15px;
}
.user_classification_box {
  padding: 0 16px;
  width: 100%;
  background-color: #fff;
  .box_big {
    display: flex;
    align-items: center;
    height: 66px;
    width: 100%;
    img {
      border-radius: 7px;
      width: 50px;
      height: 50px;
    }
    .user_box_right {
      display: flex;
      margin-left: 8px;
      height: 66px;
      line-height: 66px;
      width: calc(100% - 58px);
      border-bottom: 1px solid rgb(237, 237, 237);
      .van-col:nth-of-type(1) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 16px;
      }
      .van-col:nth-of-type(2) {
        color: #9d9b9b;
        font-size: 14px;
        flex: 1;
        text-align: right;
      }
    }
  }
}
</style>
